<template>
  <div class="app-box">
    <h5 class="title">分期查询</h5>
    <scroller lock-x @on-scroll="scrollList" @on-pullup-loading="refresh" @on-pulldown-loading="loadMore" :scroll-bottom-offst="200">
      <div>
        <cell v-for="item in stageList" :key="item.order_id" :title="item.order_state=='99'?'分期失败':'分期成功'" :inline-desc="item.serial_no_time" @click.native="stageDetail(item)">
          <p>{{item.stage_amt}}元</p>
          <p>{{item.stage_count}}/6</p>
        </cell>
      </div>
    </scroller>
  </div>
</template>
<script>
import { Scroller, Cell } from 'vux'
import { queryStageList } from '@/api/guide'
export default {
  components: {
    Scroller,
    Cell
  },
  data: function() {
    return {
      timer: null,
      keywords: {
        open_id: '9XnnNslSp2vmqQGRqAJeNfLAknwfSXBqYyo4Zza5WnQ%3D', //this.$router.query.open_id
        min_count: 0,
        max_count: 20,
        servlet_type: 'query_order',
        now: 1523525196129
      },
      stageList: null
    }
  },
  created: function() {
    this.getStageList()
  },
  methods: {
    getStageList() {
      queryStageList(this.keywords, this.keywords).then(res => {
        console.log(res)
        this.stageList = res.data.lft_orderinfo_response
          .lfqorderInfo_arrays.lfqorderInfo
      }).catch(error => { console.log(error) })
    },
    stageDetail(item) {
      console.log(item)
      this.$router.push({
        name: 'orderdetail',
        query: {
          open_id: this.keywords.open_id,
          serial_no: item.serial_no,
          servlet_type: 'query_orderByOrderId'
        }
      })
    },
    loadMore() {
      console.log('请求更多数据')
    },
    refresh() {
      console.log('刷新了')
      this.getStageList()
    },
    scrollList() {
      let that = this
      console.log(arguments[0].top)
      if (0 > arguments[0].top > -30) {
        // 维护一个 timer
        // let timer = null
        // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
        clearTimeout(this.timer)
        this.timer = setTimeout(function() {
          that.refresh()
        }, 200)
      } else {
        this.timer = setTimeout(function() {
          that.loadMore()
        }, 200)
      }
    }
  }
}

</script>
<style lang="less" scoped>
.title {
  text-align: center;
  font: normal 400 20px/44px 'microsoft yahei';
  background: #2792e4;
}

</style>
